<script setup lang="ts">
import * as admin from '@/apis/admin'
import { ref, watch } from 'vue'

let count = ref(20)
let currentPage = ref(1)
let loading = ref(false)
const searchUser = ref('')

const userList = ref([])

watch(
  () => currentPage.value,
  page => {
    loading.value = true
    admin.getUsers(page - 1, count.value).then(res => {
      loading.value = false
      if (res.data.code != 200) {
        ElMessage(res.data.msg)
        return
      }
      userList.value = res.data.data
    })
  },
  {
    immediate: true
  }
)

function matchUser() {
  loading.value = true
  admin.getUsers(0, count.value, searchUser.value).then(res => {
    loading.value = false
    if (res.data.code != 200) {
        ElMessage(res.data.msg)
        return
      }
    userList.value = res.data.data
  })
}
</script>

<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <h2>用户管理</h2>
      </div>
    </template>
    <el-table :data="userList" style="width: 100%" table-layout="auto">
      <!-- <el-table-column prop="_id" label="_id" /> -->

      <el-table-column label="账户">
        <template #header>
          <div style="display: flex; flex-wrap: nowrap">
            <span style="padding-right: 10px; flex-shrink: 0">账户</span>
            <el-input size="small" @change="matchUser" v-model="searchUser" placeholder="查询用户" style="width: 120px; flex-shrink: 0" />
          </div>
        </template>
        <template #default="scope">
          <span>{{ scope.row.user }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="password" label="密码" />
      <el-table-column label="头像">
        <template #default="scope">
          <img style="height: 40px; height: 40px" :src="scope.row.avatarUrl" alt="" srcset="" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="loginIp" label="登录IP" />
      <el-table-column prop="regtime" label="注册时间" />
      <!-- <el-table-column label="操作">
        <template #header>
          <span style="padding-right: 10px">操作</span>
        </template>
        <template #default="scope">
          <el-button size="small">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div style="margin-top: 20px">
      <el-pagination v-model:current-page="currentPage" :page-size="20" :small="true" layout="total,prev, pager, next, jumper" :total="count" />
    </div>
  </el-card>
</template>

<style scoped></style>
